<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  usingFlag: 1,
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row",
        content: [
          {
            label: "费用代码",
            prop: "code",
            type: "label_input",
            placeholder: "请选择费用代码",
            xl: 8,
          },
          {
            label: "缩写",
            prop: "abbr",
            type: "label_input",
            placeholder: "请输入缩写",
            xl: 8,
          },
          {
            label: "费用中文名",
            prop: "nameZh",
            type: "label_input",
            placeholder: "请输入费用中文名",
            xl: 8,
          },
          {
            label: "费用英文名",
            prop: "nameEn",
            type: "label_input",
            xl: 8,
          },
          {
            label: "默认币种",
            prop: "currencyCode",
            name: "currency",
            type: "label_select",
            options: [],
            props: {
              label: "subName",
              value: "subCode",
            },
            xl: 8,
          },
          {
            label: "计量单位",
            prop: "unit",
            type: "label_number",
            xl: 8,
          },
          {
            label: "默认单价",
            prop: "price",
            type: "label_number",
            xl: 8,
          },
          {
            label: "最低费用",
            prop: "minCost",
            type: "label_number",
            xl: 8,
          },
          {
            label: "最高费用",
            prop: "maxCost",
            type: "label_number",
            xl: 8,
          },
          {
            label: "排序",
            prop: "sort",
            type: "label_number",
            xl: 8,
          },
          {
            label: "状态",
            prop: "usingFlag",
            type: "label_switch",
            activeValue: '1',
            inactiveValue: '0',
            xl: 8,
          },
          {
            label: "费项归属",
            prop: "section",
            type: "label_checkbox",
            options: [],
            props: {
              label: "subName",
              value: "subName",
            },
            span: 24,
          },
          {
            label: "费项说明",
            prop: "remark",
            type: "label_input",
            inputType: "textarea",
            xl: 12,
          },
        ],
      },
    ],
  },
]);
const rules = ref({});
const saveBtnLoading = ref(false);
onMounted(() => {
  onGetSub();
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
const onGetSub = () => {
  getSubZhEn({
    code: "003,037",
  }).then((res) => {
    columnFilters(formColumns.value, "currencyCode").options = res["003"];
    columnFilters(formColumns.value, "section").options = res["037"];
  });
};
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.common.costManagement.getInfo(
      props.currRow.id
    );
    formData.value = {
      ...data,
      section: data.section.split(","),
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
    section: formData.value.section.join(","),
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.common.costManagement
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.common.costManagement
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
